<#-- @ftlvariable name="layoutItems" type="java.util.List<com.fable.sp.core.domain.LayoutItem>" -->
<#-- @ftlvariable name="layout" type="com.fable.sp.core.domain.Layout" -->
<#assign east>
    <@ui.panel title="操作">
    <button class="btn btn-sm btn-primary" id="addItem">添加布局项</button>
    <button class="btn btn-sm btn-primary disabled" id="removeItem">删除布局项</button>
    </@ui.panel>
</#assign>

<style>
    #layout-${layout.id} {
        height: ${layout.height}px;
        position: relative;
    <#if layout.style??>${layout.style.toString()}</#if>
    }

    #layout-${layout.id} .layout-item {
        <#if layout.cellBorder??>border: ${layout.cellBorder.toString()};</#if>
        position: absolute;
    }

    .smart-widget {
        margin-bottom: 15px;
    }
</style>

<@ui.styleSheet styleEntitys=layoutItems prefix="layout-item"/>

<@ui.designer east=east activeStep=1>
<div class="darklue">
    <div class="grid-stack" data-id="${layout.id}" id="layout-${layout.id}">
    </div>
</div>

<div style="padding-top: 30px">
    <div class="text-center">
        <a class="btn btn-primary" href="<@spring.url relativeUrl='/sp/addWidget?containerId=${containerId}'/>">下一步</a>
    </div>
</div>
<@ui.initLayout/>
</@ui.designer>